<template>
  <div class="mask">
    <div class="toast">
      <div class="title">动画效果</div>
      <div class="tips">(tips:刷新页面或下一次进入页面生效)</div>
      <div class="close" @click="$emit('close')">
        <img src="../../assets/close.svg" alt="">
      </div>
      <ul class="lists">
        <li @click="changeAnimateHandler(index)" class="list"
            :class="index === animations?.current ? 'active' : ''" v-for="(item, index) in animations?.lists"
            :key="item.aid">{{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import {defineEmits, onMounted, ref} from 'vue';
import {getLocalStorageData} from '../../../utils/local';
import type {Ref} from 'vue';

type List = {
  aid: string,
  leaveClass: string,
  enterClass: string,
  name: string
}
type Animation = {
  current?: number,
  lists?: Array<List>
}
const emit = defineEmits(['close', 'changeAnimate'])
const animations: Ref<Animation> = ref({})
const changeAnimateHandler = (index: number) => {
  animations.value.current = index
  emit('changeAnimate', index)
}
onMounted(() => {
  const animationsLocal = getLocalStorageData('animations')
  animations.value = animationsLocal
})
</script>
<style lang="less" scoped>
.mask {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  .toast {
    color: #333;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
    background-color: #fff;
    border-radius: 1rem;
    width: 50vw;
    height: 80vh;
    z-index: 2;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    border: 1px solid transparent;
    padding-bottom: 2rem;

    .close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
    }

    .tips {
      font-size: 16px;
      color: #333;
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .title {
      font-size: 1.5rem;
      margin-top: 1rem;
      text-align: center;
    }

    .lists {
      padding: 1rem;
      display: flex;
      flex-wrap: wrap;

      .list {

        border: #67C23A 1px solid;
        color: #67C23A;
        padding: 0.5rem 0.5rem;
        cursor: pointer;
        border-radius: 0.5rem;
        margin-right: 0.8rem;

        &.active {
          background-color: #67C23A;
          color: #fff;
        }
      }
    }
  }
}
</style>